<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
</head>
<body>
  <input type="file" id="myfile" > <button onclick="upLoad()"> 上传</button> 
  <img id="img" width="200">
  <script>

    function changeHd(){
      var myfile = document.getElementById("myfile");
      var  img = document.getElementById("img");
      // 通过文本文件创建url
      img.src = window.URL.createObjectURL(myfile.files[0]);
    }
    function upLoad(){
      var myfile = document.getElementById("myfile");
      var  img = document.getElementById("img");
      var file = myfile.files[0]; //获取到文件
      var data = new FormData(); //发送给后端的数据
      data.append('file', file); //添加文件
      // 用本地图片预览(不需要等待)
      img.src = window.URL.createObjectURL(file);
      // ajax(
      //   {url:"http://dida100.com:8889/api/upload",
      //   method:"POST",
      //   data:data,
      //   headers:{},
      //   // headers:{'Content-Type': 'multipart/form-data'},
      //   success(res){
      //     console.log(res,"success");
      //   },
      //   fail(err){
      //     console.log(err,"err");
      //   },
      //   complete(xhr){
      //     console.log(xhr,"complete")
      //   }
      //   })
      ajax.post(
        "http://dida100.com:8889/api/upload",
        data,
        // {progress(e){console.log("加载进度e",e)}}
        )
      .then(res=>{
        console.log("post",res);
        // 用远程图片预览上传的图片
        // img.src= "http://dida100.com:8889"+res.file.path

      })
    }

    function ajax(config){
      // 默认参数
      var defaults ={
        url:"",
        method:"GET",
        success:()=>{},
        fail:()=>{},
        complete:()=>{},  
        progress:()=>{},      
      }
      // 合并默认参数
      // 是默认GET的content-Type
      if(!config.method){config.method="GET"};
      if(config.method==="GET"){
        defaults.headers={"Content-Type":"application/x-www-form-urlencoded"};
        // 如果是get请求并且传了data参数，并且参数是对象
        if(config.data&& typeof config.data==="object"){
          var str = "?";
          // 把对象转换为url编码的形式
          for(var k in config.data){
            str+=`${k}=${config.data[k]}&`
          }
          // 移除最后一个&
          str = str.slice(0,-1);
          // 更新url
          config.url = config.url+str;
        } 
      }
      // 默认POST的content-Type
      if(config.method==="post"&&!config.data instanceof FormData){
        defaults.headers={"Content-Type":"application/json"};
      }
      // 合并defaults与config并让config（用户写的config覆盖默认的）
      config = Object.assign(defaults,config);
      return new Promise((resolve,reject)=>{
        // promise 开始
        // console.log(config);
        // 创建一个xhr对象
        var  xhr = new XMLHttpRequest();
         
        // 打开链接
        xhr.open(config.method,config.url);
        // 添加请求头
        for(var k in config.headers){
          xhr.setRequestHeader(k,config.headers[k]);
        }
      
        // 发送数据
        xhr.send(config.data);
        // 监听变化
        xhr.onreadystatechange = function(){
          // console.log(xhr);
          // 如果状态为4请求完毕
          if(xhr.readyState===4){
            // 如果响应码是200，请求成功
            if(xhr.status === 200){
              // 执行回调函数返回数据
              config.success(JSON.parse(xhr.responseText))
              resolve(JSON.parse(xhr.responseText))
            }else{
              // 失败返回整个xhr
              config.fail(xhr);
              reject(xhr)
            }
            config.complete(xhr);
          }
        }

        // xhr.upload.onprogress =function(e){
        //   config.progress(e);
        // }
        // promsie 结束
      })
    }
    
    ajax.get = function(url,data,config={}){
      return ajax({url,data,...config})
    }
    ajax.post = function(url,data,config={}){
      return ajax({url,method:"POST",data,...config})
    }
    // ajax({
    //   url:"http://dida100.com/mi/list.php",
    //   // method:"GET",
    //   data:{page:2},
    //   success(res){
    //     console.log(res);
    //   }
    // })
  

    // ajax({url:"http://dida100.com/mi/list.php",data:{page:2}})
    // .then(res=>{
    //   console.log("promsie",res);
    // })
    // .catch(err=>{
    //   console.log("promise",err);
    // })
    ajax.get("http://dida100.com/mi/list.php",{page:2})
    .then(res=>{
      console.log("get",res)
    })
    
  </script>
</body>
</html>